<template>
	<div>
		<div id="query">
			<el-header class="el-header">
				科室管理
			</el-header>
		</div>
		<div style="margin-top: 15px;">
			<el-input placeholder="请输入内容" v-model="input" class="input-with-select" style="width: 500px;">
				<el-select v-model="select" slot="prepend" placeholder="请选择">
					<el-option label="科室名称" value="1"></el-option>
					<el-option label="科室编号" value="2"></el-option>
				</el-select>
				<el-button slot="append" icon="el-icon-search" @click="Query"></el-button>
			</el-input>
			<el-button type="success" style="margin-left: 100px;" @click="dialogFormVisible = true">新增科室</el-button>
		</div>
		<div>
			<el-table :data="tableData" style="100%" >
				<el-table-column prop="depid" label="科室编号" width="120">
					<template slot-scope="scope"><span>{{scope.row.depid}}</span>
						<!-- <el-input v-if="scope.row.isEdit" v-model="scope.row.depid"></el-input> -->
					</template>
				</el-table-column>
				<el-table-column prop="deptype" label="科室分类" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.deptype}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.deptype"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="科室名称" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.name}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.name"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="number" label="医生数量" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.number}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.number"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="function" label="操作">
					<template slot-scope="scope">
						<el-button v-if="!scope.row.isEdit" type="primary " @click="Change(scope.$index,scope.row)">修改
						</el-button>
						<el-button v-if="scope.row.isEdit" type="success "
							@click="CompleteChange(scope.$index,scope.row)">修改完成</el-button>
						<el-button type="danger " @click="Delete(scope.$index)"
						@click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-row>
				<el-dialog title="新增科室" :visible.sync="dialogFormVisible">
					<el-form :model="form">
						<el-form-item label="科室编号" :label-width="formLabelWidth">
							<el-input v-model="form.depid" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="科室分类" :label-width="formLabelWidth">
							<el-input v-model="form.deptype" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="科室名称" :label-width="formLabelWidth">
							<el-input v-model="form.name" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary " @click="Add">确 定</el-button>
					</div>
				</el-dialog>
			</el-row>
		</div>
	</div>
</template>



<style>
	.el-header {
		text-align: left;
		font-size: 40px;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		background-color: #4fc1b0;
	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
</style>
<script>
import axios from 'axios';
import {showMsgTitle} from '@/utils/api2'
import {showMsgConfirm} from '@/utils/api2'
import {getRequest}   from '@/utils/api2'
import {postRequest} from '@/utils/api2'
	export default {
		data() {
			return {
				isEdit: false, //编辑
				// msg1: '用户管理',
				input: '',
				select: '',
				tableData: [{}],
				dialogFormVisible: false,
				form: {
					depid: '',
					deptype: '',
					name: '',
					number: '',
					title: '',
				},
				formLabelWidth: '120px'
			}
		},
		mounted: function() {
			let url = "/queryDepartment";
			let _this = this;
			getRequest(url).then(resp => {
			    if (resp.status == 200) {
			    	//alert(resp.data);
			      _this.tableData = resp.data;
			    } else {
			      _this.$message({type: 'error', message: '数据加载失败!'});
			    }
			  }, resp => {
			    _this.loading = false;
			    if (resp.response.status == 403) {
			      _this.$message({type: 'error', message: resp.response.data});
			    } else {
			      _this.$message({type: 'error', message: '数据加载失败!'});
			    }
			  }).catch(resp => {
			    //压根没见到服务器
			    _this.loading = false;
			    _this.$message({type: 'error', message: '数据加载失败!'});
			  });
		},
		methods: {
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			Query() {	
				let url = "/queryDepartment";
				let _this = this;

				getRequest(url).then(resp => {
						if (this.select == '') {
							this.$message({
								showClose: true,
								type: "false",
								message: "请选择查询方式"
							});
						} else if (this.select == 2) {
							this.tableData = [];
							for (var i = 0; i < resp.data.length; i++) {
								if (this.input == resp.data[i].depid) {
									this.tableData.push(resp.data[i]);
								}
								if (this.input == '') {
									this.tableData = resp.data;
								}
							}
						} else if (this.select == 1) {
							this.tableData = [];
							for (var i = 0; i < resp.data.length; i++) {
								if (this.input == resp.data[i].name) {
									this.tableData.push(resp.data[i]);
								}
								if (this.input == '') {
									this.tableData = resp.data;
								}
							}
						}
					})
			}, //query end
			Add() {
                 /********************/
				this.dialogFormVisible = false;
				console.log(this.form);
				postRequest('/insertDepartment', this.form);
				this.$message({
					showClose: true,
					type: "success",
					message: "添加成功"
				});
				/***************动态添加行****************/
				if (this.tableData == undefined) {
				        this.tableData = new Array();
				      }			
						let obj = {};
						obj.depid = this.form.depid;
						obj.deptype =this.form.deptype;
						obj.name =this.form.name;
						obj.number =0;
				      this.tableData.push(obj);
				/*********************************/	  
				//location.href='/user_admin'				
				/**************************/
			}, //Add end
			Delete(index) {
                postRequest('/deleteDepartment', this.tableData[index]);
				this.$message({
					showClose: true,
					type: "success",
					message: "删除成功"
				});
			}, //delete end
			Change(index, row) {
				this.$set(row, 'isEdit', true);
			}, //change end
			CompleteChange(index, row) {
				this.$set(row, 'isEdit', false);
				console.log(this.tableData);
				console.log(this.tableData[index]);
				postRequest('/updataDepartment', this.tableData[index]);

				//location.href='/user_admin'				
				/**************************/
			} //change end

		} //method end
	 }
</script>
